chip介紹

再填一些問卷時，會在頁面最頂部增添一些標籤分類，這就是用到我們的chip
這篇主要介紹chip的用法。

chip 屬性介紹

android:text設定chip 標籤上的文字
android:checkable使chip能夠被選擇(使用在想讓標籤存在畫面上但卻不能夠點擊時可以設成false)
app:closeIconVisible顯示chip關閉圖示
app:chipIcon在左側設定自定義的圖示
app:chipIconEnabled=設定圖示是否顯示
app:chipBackgroundColor設定圖示背景顏色

ChipGroup

在所有的chip外可以包裹一個group ，讓之後邏輯判斷更輕鬆。

ChipGroupg屬性介紹

app:singleSelection="true"讓底下的chip可以多個被選中
app:singleLine="true"可以設定底下的標籤在同一水平顯示，若標籤太長可以在最外圈加上<HorizontalScrollView>加上一個滾輪

chip的程式

可以設定一些監聽器來一次觀察全部chip的點擊事件
也可以單一chip設定點擊事件改變狀態
Chip Chip1 = findViewById(R.id.chip1);

 Chip1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            boolean isIconVisible = Chip1.isChipIconVisible();
                Chip1.setChipIconVisible(!isIconVisible);
            }
        });

下面是我完整得程式範例:
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    ChipGroup chipGroup = findViewById(R.id.chipGroup);

    TextView selectedChipTextView = findViewById(R.id.selectedChipTextView);

    chipGroup.setOnCheckedChangeListener(new ChipGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(ChipGroup group, int checkedId) {
            if (checkedId != -1) {
                Chip chip = findViewById(checkedId);
                selectedChipTextView.setText("選中的 Chip: " + chip.getText());
            } else {
                selectedChipTextView.setText("未選擇 ");
            }
        }

    });


    Chip Chip1 = findViewById(R.id.chip1);

    Chip1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 切換圖示顯示狀態
            boolean isIconVisible = Chip1.isChipIconVisible();
            Chip1.setChipIconVisible(!isIconVisible);
        }
    });
    Chip Chip2 = findViewById(R.id.chip2);

    Chip2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 切換圖示顯示狀態
            boolean isIconVisible = Chip2.isChipIconVisible();
            Chip2.setChipIconVisible(!isIconVisible);
        }
    });
    Chip Chip3 = findViewById(R.id.chip3);

    Chip3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 切換圖示顯示狀態
            boolean isIconVisible = Chip3.isChipIconVisible();
            Chip3.setChipIconVisible(!isIconVisible);
        }
    });



}

}
UI布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true"
        app:closeIconVisible="true"
        app:singleLine="true">
        <com.google.android.material.chip.Chip
            android:id="@+id/chip1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="標籤一"
            app:chipIconEnabled="false"
            app:chipIcon="@drawable/eee"
            android:checkable="true"
       />
        <com.google.android.material.chip.Chip
            android:id="@+id/chip2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="標籤二"
            app:chipIconEnabled="false"
            app:chipIcon="@drawable/eee"
            android:checkable="true"
          />
        <com.google.android.material.chip.Chip
            android:id="@+id/chip3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="標籤三"
            app:chipIconEnabled="false"
            app:chipIcon="@drawable/eee"
            android:checkable="true"
            />
    </com.google.android.material.chip.ChipGroup>
    </HorizontalScrollView>

    <TextView
        android:id="@+id/selectedChipTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="選中的 Chip: "
        android:textSize="18sp" />
</LinearLayout>

最後成果如下